<template>
  <div class="content">
    <div class="header">
      <img class="header-img" src="../../../assets/login/login_log.png" alt="客易达" />
      <div class="headerGap"></div>
      <div class="headerFont">用客易达连接客户</div>
    </div>
    <div class="content-detail">
      <div class="left-nav">
        <div v-for="(item, index) in keyList" :key="index" @click="clickTab(item.name)" class="nav-title">
          <div class="point" v-show="item.isSelect"></div>
          <span :class="item.isSelect ? 'colored' : 'no-color'">{{ item.label }}</span>
        </div>
      </div>
      <div class="bar"></div>
      <Agreement v-show="showAgreent === 'userAgreement'"></Agreement>
      <Privacy v-show="showAgreent === 'privacyAgreement'"></Privacy>
      <Message v-show="showAgreent === 'messageRule'"></Message>
      <Service v-show="showAgreent === 'service'"></Service>
    </div>
    <div class="footer">
      <div>Copyright&copy;2021- 2022 keyid.com. 版权所有</div>
      <div>增值电信业务经营许可证： 沪B2-20211704 | 沪ICP备2021020699号-2</div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import Agreement from './components/Agreement.vue'
  import Privacy from './components/Privacy.vue'
  import Message from './components/Message.vue'
  import Service from './components/Service.vue'
  import { useRoute } from 'vue-router'

  const router = useRoute()
  let showAgreent = ref('userAgreement')

  const keyList = ref([
    {
      id: 0,
      label: '用户协议',
      name: 'userAgreement',
      isSelect: true
    },
    {
      id: 1,
      label: '隐私声明',
      name: 'privacyAgreement',
      isSelect: false
    },
    {
      id: 2,
      label: '短信服务协议',
      name: 'messageRule',
      isSelect: false
    },
    {
      id: 3,
      label: '外呼服务协议',
      name: 'service',
      isSelect: false
    }
  ])
  const clickTab = (data: any) => {
    keyList.value.forEach((item: any) => {
      if (item.name == data) {
        item.isSelect = true
      } else {
        item.isSelect = false
      }
    })
    showAgreent.value = data
  }

  const loadParamSet = () => {
    const params = router.query.show
    clickTab(params)
    // console.log(params);
  }
  loadParamSet()
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    overflow: hidden;
    .header {
      width: 100%;
      height: 53.8px;
      background-color: #ffffff;
      display: flex;
      justify-content: left;
      align-items: center;
      .header-img {
        display: block;
        width: 95px;
        height: 23px;
        margin-left: 40px;
      }
      .headerGap {
        width: 1px;
        height: 18px;
        background: #d0d0d0;
        border-radius: 1px;
        margin: 0 14px;
      }
      .headerFont {
        font-size: 14px;
        color: #33302d;
        line-height: 14px;
        letter-spacing: -0.35px;
      }
    }
    .content-detail {
      width: 1200px;
      height: 744.6px;
      background: #ffffff;
      border-radius: 13px;
      margin: 37px auto 57px auto;
      padding: 35.8px 30px 35.8px 20px;
      box-sizing: border-box;
      display: flex;
      .left-nav {
        width: 157.5px;
        .nav-title {
          font-size: 14px;
          color: #33302d;
          margin-bottom: 18px;
          cursor: pointer;
          .point {
            display: inline-block;
            width: 5.3px;
            height: 5.3px;
            border-radius: 100%;
            background-color: #ff6b00;
          }
          .colored {
            color: #ff6b00;
            margin-left: 6px;
          }
          .no-color {
            margin-left: 11.3px;
          }
        }
      }
      .bar {
        width: 1px;
        height: 270px;
        background: #d9d9d9;
        margin-right: 29.5px;
      }
    }
    .footer {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      color: #969696;
      line-height: 20px;
    }
  }
</style>
